<template>
	<view class="uni_box">
		<!-- <navbar :isback='false' backgroundColor='#fff'>
			<view slot="left" class="hleft">
				<image class="gllogo" src="/static/LOGO.png" />
			</view>
		</navbar> -->
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<!-- <u-sticky offset-top="0" h5-nav-height="0">
				<view class="hone">
					<view class="hleft" @click="leftClick">
						<text class="hltit">{{$t('i.wotuan')}}</text>
						<image class="xia" src="/static/new/xia.png" />
					</view>
					<view class="hright">
						<image class="ricon" src="/static/new/shezhi.png" />
						<image class="ricon" src="/static/new/yuyan.png" />
						<image class="ricon" src="/static/new/yuyantwo.png"  @click="zshow = true" />
						<view class="rcont" @click="getshouru">Connect</view>
					</view>
				</view>
			</u-sticky> -->
			<Nheader @leftClick="leftClick" @connectWallet="connectWallet" :cont="cont" @gettantwo="gettantwo"></Nheader>
			<!-- 样式1 -->
			<view class="oneview" v-if="isHolder">
				<view class="htwo">
					<text class="mtuan">{{$t('i.shename')}}</text>
					<text class="htmiaoshu">{{$t('i.shemiao')}}</text>
				</view>
				<image class="mban" src="/static/new/zunav.png" />
				
				<view class="hfive">
					<image class="bg" src="/static/new/bg.png" />
					<view class="hfview">
						<view class="finput">
							<!-- <view class="ncont">
								<u-input type="text" :placeholder="qshu"></u-input>
							</view> -->
							<view class="jinbi">
								<image class="jinicon" src="/static/new/jinbi.png" />
								<text class="nb">5 BNB</text>
							</view>
							<view class="shesheng" @click="level_up">{{$t('i.sheshengji')}}</view>
						</view>
					</view>
				</view>
			</view>
				<!-- 样式2 -->
			<view class="twoview" v-if="!isHolder">
				<image class="xubg" src="/static/new/xubgs.png" />
				<view class="ziview">
					{{$t('i.yishequ')}}
				</view>
			</view>
		</view>


		<!-- 左侧弹出 -->
		<view class="lpop">
			<u-popup v-model="lshow" mode="left" width="320">
				<view class="lpview">
					<view class="lpone">
						<image class="cha" src="/static/new/cha.png" @click="lshow=false" />
					</view>
					<image class="logo" src="/static/new/logo.png" />
					<view class="pitemstwo " @click="navrouter('/pages/tabbar/ShouRu')">{{$t('i.kuangshou')}}</view>
					<view class="pitemstwo" @click="navrouter('/pages/tabbar/Tabhome')">{{$t('i.wotuan')}}</view>
					<view class="pitemstwo pitems" @click="navrouter('/pages/tabbar/Team')"> {{$t('i.woshe')}}</view>
					<image class="grentwo" src="/static/new/grentwo.png" mode="widthFix" />
				</view>
			</u-popup>
		</view>

		<!-- 中间弹出 -->
		<view class="zpop">
			<u-popup v-model="zshow" mode="center">
				<view class="tanview">
					<image class="gren" src="/static/new/gren.png"/>
					<view class="zpview">
						<view class="lpone">
							<image class="cha" src="/static/new/cha.png" @click="zshow=false" />
						</view>
						
						<view class="gview">
							<view class="gitem" @click="switchLang('en')">
								<image class="gone" src="/static/new/gone.png" />
								<text>English</text>
							</view>
							<view class="gitem" @click="switchLang('zh')">
								<image class="gone" src="/static/new/gtwo.png" />
								<text>中文</text>
							</view>
							<view class="gitem" @click="switchLang('th')">
								<image class="gone" src="/static/new/gthree.png" />
								<text>日本語</text>
							</view>
							<view class="gitem" @click="switchLang('hh')">
								<image class="gone" src="/static/new/gfour.png"/>
								<text>한국어</text>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>


		<u-select v-model="show" :list="list" @confirm="confirm" ></u-select>
</view>
</template>

<script>
	import {connectMetamask,isHolder, getLevelUp, ADDRESS0} from "@/utils/dapp.js"
	import {defaultTo, path, take, takeLast, tryCatch} from "ramda"
	import { DateTime } from 'luxon'
import { ethers } from "ethers"
import Nheader from '@/components/Nheader/Nheader'
export default {
	data() {
		return {
			bgcolor:'#fff',
			checked:false,
			border:false,
			type:'1',
			show:false,
			keywords:'',
			list: [],
			hbg:'#0d0e0f',
			cont:'',
			typeindex:0,
			iszhan:false,
			zhaninfo:{},
			applist:[],
			lshow:false,
			zshow:false,
			url:'',
			tuan_dui_ren_shu:0,
			tuan_dui_shou_kuang:0,
			tuan_dui_ye_ji:0,
			tui_jian_ren_shu:0,
			cclist:[],
			isHolder:true
		}
	},
	components: {
		Nheader
	},
	computed: {
		qshu(){
			return this.$t('i.qshu')
		},
	},

	mounted() {
		
	},
	async onLoad() {
	    uni.showLoading({title: 'loading...',mask: true})
		try{
			const isholder = await isHolder()
			this.isHolder = !isholder
			console.log({isholder})
		}catch(e){
			console.log(e)
		}finally{
			 uni.hideLoading()
		}
		

		
	},
	async onShow() {
		
	},
	onReachBottom: function () {
	},
	methods: {
		leftClick(){
			this.lshow = true
		},
		
		async level_up(){
			
			const url = new URL(window.location.href);
			const parent = url.searchParams.get("i");
			const p = parent ? parent:  ADDRESS0
			
			const res = await getLevelUp(p)
			console.log(res)
		},
		
		switchLang(e) {
			this.$i18n.locale = e
			// console.log(this.$i18n.locale)
			uni.setStorageSync('locale', e)
			this.zshow = false
			// this.$store.commit('getwen');
		},
		gettantwo(){
			this.zshow = true 
		}
		
		

	}
}
</script>

<style lang="scss" scoped>
page,
html {
}
.newcontent{
	min-height: 100vh;
	padding-bottom: 30rpx;
	background-color:  #050D13;

	.hone{
		height: 88rpx;
		background: #040509;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		.hleft{
			padding: 10rpx 25rpx;
			border-radius: 30rpx;
			opacity: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 2rpx solid #0066FF;
			.hltit{
				font-size: 24rpx;
				font-family: Segoe UI, Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}
			.xia{
				width: 21rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}
		}
		.hright{
			margin-left: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			.ricon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 25rpx;
			}
			.rcont{
				// height: 52rpx;
				background: linear-gradient(122deg, #1033F6 0%, #940AFF 100%);
				border-radius: 30rpx;
				opacity: 1;
				padding: 10rpx 25rpx;
				font-size: 28rpx;
				font-family: Segoe UI, Segoe UI;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}
	.htwo{
		padding: 70rpx 30rpx 57rpx 30rpx;
		.mtuan{
			font-size: 54rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			color: #FDD300;
			display: block;
			margin-bottom: 50rpx;
		}
		.htmiaoshu{
			font-size: 28rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: 400;
			color: #FFFFFF;
		}

	}
	.mban{
		width: 100%;
		height: 360rpx;
	}
	.hthree{
		padding: 86rpx 36rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.hitems{
			width: 47%;
			// height: 145rpx;
			padding: 16rpx 20rpx;
			background: linear-gradient(132deg, #1033F6 0%, #940AFF 100%);
			border-radius: 10rpx;
			opacity: 1;
			margin-bottom: 27rpx;
			.hione{
				display: flex;
				flex-direction: row;
				align-items: center;
				.rentwo{
					width: 25rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}
				.tui{
					font-size: 28rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.nums{
				font-size: 40rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans;
				font-weight: bold;
				color: #FDD300;
				display: inline-block;
				margin-left: 35rpx;
				margin-top: 10rpx;
			}
		}
		.hitems:nth-child(even){
			margin-left: auto;
		}
	}
	.hfour{
		position: relative;
		padding: 0 36rpx;
		height: 189px;
		.qiu{
			position: absolute;
			right: -110px;
			height: 300px;
    		z-index: 1;
		}
		.yaotit{
			font-size: 32rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: bold;
			color: #FFFFFF;
			display: block;
			margin-bottom: 27rpx;
		}
		.yaoview{
			padding: 20rpx 25rpx;
			background: linear-gradient(133deg, #1033F6 0%, #940AFF 100%);
			border-radius: 10rpx;
			opacity: 1;
			display: flex;
			flex-direction: row;
			z-index: 2;
			position: relative;
			align-items: center;
			.lian{
				display: inline-block;
				max-width: 80%;
				font-size: 28rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans;
				font-weight: 400;
				color: #FFFFFF;
			}
			.fuzhi{
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
		}
		.canyu{
			font-size: 24rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: 400;
			color: #8E8E95;
			display: block;
			margin-top: 20rpx;
		}
	}

	.xubg{
		height: 100vh;
		position: absolute;
		width: 100%;
		top: 0;

	}
	.twoview{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ziview{
		display: block;
		position: relative;
		text-align: center;
		font-size: 30rpx;
		font-family: Satoshi-Medium, Satoshi-Medium;
		font-weight: normal;
		color: #FFFFFF;
		z-index: 10;
		position: absolute;
    	bottom: 20%;
	}
	.hfive{
		position: relative;
		

		.bg{
			position: absolute;
			width: 100%;
			height: 400rpx;
			top: 50rpx;
		}
		.hfview{
			position: relative;
			padding: 0 36rpx;
		}
		.ncont{
			margin-top: 100rpx;
			display: flex;
			padding: 0 30rpx;
			align-items: center;
			height: 80rpx;
			background: #2E2E2E;
			border-radius: 10rpx;
			opacity: 1;
			/deep/.uni-input-input {
				color: #fff;
			}
		}
		.shesheng{
			margin: 50rpx auto 0;
			width: 388rpx;
			height: 70rpx;
			// background: linear-gradient(133deg, #1033F6 0%, #940AFF 100%);
			border-radius: 33rpx;
			background: linear-gradient(2deg, #FFD460, #F3A100);
			// border-radius: 5rpx;
			box-shadow: 0rpx 5rpx 12rpx 0rpx rgba(254,209,91,0.64);
			border: 2rpx solid #FFE4A1;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: Satoshi-Medium, Satoshi-Medium;
			font-weight: normal;
			color: #FFFFFF;
		}
		.finput{
			.jinbi{
				width: 166rpx;
				height: 166rpx;
				border-radius: 23rpx;
				opacity: 1;
				margin: 88rpx auto 20rpx;
				border: 2rpx solid #F3A100;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.jinicon{
					width: 64rpx;
					height: 64rpx;

				}
				.nb{
					font-size: 30rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans;
					font-weight: 500;
					margin-top: 10rpx;
					color: #FDD300;
				}
			}

		}
		.tuantit{
			font-size: 48rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: bold;
			color: #FFFFFF;
		}
		.diview{
			.dihead{
				display: flex;
				flex-direction: row;
				padding: 30rpx 0;
				.ones{
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.ditwo{
				display: flex;
				flex-direction: row;
				background: #2E2E2E;
				padding: 20rpx 0;
				.ones{
					font-size: 22rpx;
					font-family: Arial, Arial;
					font-weight: 400;
					color: #A9A9A9;
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					// padding: 0 15rpx;
					text-align: center;
					margin-left: 10rpx;
					// display: inline-block;
				}
			}
			.ditwo:nth-child(even){
				background: rgba(37, 37, 37, 0.58);
				.ones{
					color: #A9A9A9;
				}
			}
		}
	}
}
// 左侧弹出
.lpop{
  /deep/ .u-drawer-left{
	background: linear-gradient(2deg, #FFD460, #F3A100);
	border-radius: 5rpx;
	border: 2rpx solid #FFE4A1;
	// background: linear-gradient(180deg, #1033F6 0%, #940AFF 100%);
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
  }
  .lpview{
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	.lpone{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	}
	.cha{
		width: 48rpx;
		height: 48rpx;
	}
	.logo{
		margin: 78rpx auto 76rpx;
		height: 95rpx;
		width: 85%;
	}
	
	.pitemstwo{
		padding: 25rpx 20rpx;
		// background: #FFFFFF;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		margin-bottom: 50rpx;
	}
	.pitems{
		padding: 25rpx 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		color: #F3A100;
		margin-bottom: 50rpx;
	}
	.grentwo{
		width: 100%;
		margin-top: auto;
		height: 429rpx;
	}
  }
}
// 左侧弹出结束
.tanview{
	position: relative;
	width: 352px;
    height: 371px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zpop{
  /deep/ .u-mode-center-box{
	background: transparent;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
  }
  .gren{
	width: 241rpx;
	height: 268rpx;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	position: absolute;
	top: -25px;
    z-index: 100;
    left: 23px;
}
  .zpview{
	width: 504rpx;
	// height: 508rpx;
	background: linear-gradient(2deg, #FFD460, #F3A100);
	// border-radius: 5rpx;
	border: 2rpx solid #FFE4A1;
	box-shadow: 0rpx 5rpx 21rpx 0rpx rgba(254,209,91,0.64);
	// background: linear-gradient(180deg, #1033F6 0%, #940AFF 100%);
	border-radius: 44rpx;
	opacity: 1;
	position: relative;
	padding: 30rpx 26rpx;
	
	.lpone{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		margin-bottom: 50rpx;
	}
	.cha{
		width: 48rpx;
		height: 48rpx;
	}
	.gview{
		display: flex;
		flex-direction: column;
		.gitem{
			padding: 19rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			opacity: 1;
			border: 2rpx solid #FFFFFF;
			margin-bottom: 20rpx;
			.gone{
				width: 57rpx;
				height: 37rpx;
				margin-right: 24rpx;
			}
			text{
				font-size: 32rpx;
				font-family: Satoshi-Medium, Satoshi-Medium;
				font-weight: normal;
				color: #FFFFFF;
				display: inline-block;
				width: 100rpx;
			}
		}
	}
  }
}  
/deep/.uni-mask {
	background: rgba(0,0,0,.5) !important;
}
</style>
<style>
.uni-mask {
	background: rgba(0,0,0,.5) !important;
}
</style>
